<template>
  <div class="app-container">
    <!-- 导航 -->
    <NavBarBread :bread="breadList">
      <el-button v-show="showAddBotton" type="text" @click="handelAdd">新增</el-button>
      <el-button v-show="showBackBotton" type="text" @click="handelback">返回</el-button>
    </NavBarBread>
    <!-- 规则模块tab -->
    <div v-show="showSection" class="tool-container">
      <div class="toggle-alarm">
        <div v-for="(item, index) in tabs" :key="item.key" :class="[index === activeIndex ? 'isActive' : '']" @click="toggleTbas(index)">{{ item.text }}</div>
      </div>
    </div>
    <!-- 内容展示区域 -->
    <!-- 
      @ fence-list —— 电子围栏列表自定义组件
      @ standard-rule —— 标准报警规则设置自定义组件
      @ custom-list —— 自定义规则列表自定义组件
      @ hand-rule —— 申诉规则设置自定义组件
      @ custom-actions ——  自定义规则新增/编辑自定义组件
      @ setting-fence ——  电子围栏设置自定义组件
     -->
    <transition name="fade-transform" mode="out-in">
      <div v-show="showSection" class="section">
        <transition name="fade-transform" mode="out-in">
          <!-- 电子围栏数据列表 -->
          <fence-list v-if="activeIndex === 0" ref="fenceList" @editFence="editFence" />
          <!-- 标准报警规则设置 -->
          <standard-rule v-if="activeIndex === 1" />
          <!-- 自定义规则设置 -->
          <custom-list v-if="activeIndex === 2 && !openAction" ref="custom" @edit="edit" />
          <!-- 申诉规则设置 -->
          <hand-rule v-if="activeIndex === 3" />
        </transition>
      </div>
    </transition>
    <!-- 自定义规则新增/编辑 -->
    <custom-actions v-show="activeIndex === 2 && openAction" ref="customAction" @cancel="cancelActions" />
    <!-- 电子围栏设置 -->
    <transition name="fade-transform" mode="out-in">
      <div v-show="!showSection">
        <setting-fence ref="settingFence" @cancel="handelback" />
      </div>
    </transition>
  </div>
</template>
<script>
import fenceList from './components/fenceList'
import customList from './components/customList'
import standardRule from './components/standardRule'
import customActions from './components/customEditOrAdd'
import settingFence from './components/fenceEditOrAdd'
import handRule from './components/handRule'
import NavBarBread from '@/components/NavBarBread'
export default {
  name: 'RuleManage',
  components: { fenceList, customList, standardRule, customActions, NavBarBread, settingFence, handRule },
  data() {
    return {
      tabs: [
        { text: '电子围栏设置', key: 0 },
        { text: '标准报警规则设置', key: 1 },
        { text: '自定义规则设置', key: 2 },
        { text: '申诉规则设置', key: 3 }
      ],
      activeIndex: 0,
      openAction: false, // 打开or关闭 自定义规则的修改(新增)
      isSettingFence: false, // 打开or关闭 电子围栏设置的修改(新增)
      breadList: [],
      showAddBotton: true,
      showBackBotton: false,
      showSection: true
    }
  },
  created() {
    this.initBread()
  },
  methods: {
    initBread() {
      this.breadList = [this.$route.meta.parentName, this.$route.meta.menuName, '电子围栏设置']
    },
    // tab切换逻辑
    toggleTbas(index) {
      this.activeIndex = index
      switch (this.activeIndex) {
        case 0:
        case 2:
          this.showAddBotton = true
          break
        case 1:
        case 3:
          this.showAddBotton = false
      }
      this.openAction = false
      if (this.breadList.some(item => item === '新增' || item === '修改')) {
        this.breadList = [this.$route.meta.parentName, this.$route.meta.menuName, this.tabs[index].text]
      } else {
        this.breadList[this.breadList.length - 1] = this.tabs[index].text
      }
    },
    // 点击添加按钮逻辑
    handelAdd() {
      switch (this.activeIndex) {
        case 0:
          this.showSection = false
          this.showAddBotton = false
          this.showBackBotton = true
          this.$refs.settingFence.isEdit = false
          this.$refs.settingFence.init()
          this.breadList.push('新增')
          break
        case 2:
          this.openAction = true
          this.showAddBotton = false
          this.breadList.push('新增')
          this.$refs.customAction.initRuleForm()
          this.$refs.customAction.isEdit = false
      }
    },
    // 点击返回按钮逻辑
    handelback() {
      this.showSection = true
      this.showAddBotton = true
      this.showBackBotton = false
      this.breadList.pop()
      this.$refs.fenceList.queryTableList()
    },
    cancelActions() {
      this.openAction = false
      this.showAddBotton = true
      this.breadList.pop()
    },
    // 编辑电子围栏
    editFence(parms) {
      this.showSection = false
      this.showAddBotton = false
      this.showBackBotton = true
      this.breadList.push('修改')
      this.$refs.settingFence.fenceId = parms.id
      this.$refs.settingFence.isEdit = true
      this.$refs.settingFence.init()
      this.$refs.settingFence.searchFenceInfo()
    },
    // 编辑自定义规则数据
    edit(param) {
      this.openAction = true
      this.showAddBotton = false
      this.breadList.push('修改')
      this.$refs.customAction.initRuleForm(param)
      this.$refs.customAction.isEdit = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .tool-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    .toggle-alarm{
        display: flex;
        margin-bottom: 20px;
        line-height: 40px;
        div{
          border: 1px solid rgba(121, 121, 121, 1);
          text-align: center;
          border-radius: 5px;
          margin-right: 30px;
          cursor: pointer;
          padding: 0 15px;
        }
        .isActive{
          color: #fff;
          background: rgba(5, 167, 171, 1);
          border-color: rgba(5, 167, 171, 1);
        }
    }
  }
</style>
